
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
} from 'react-native';

import { Icon } from 'react-native-elements';


import {
  HText,
  Divider,
  Navbar,
  Button,
  Toast,
} from '../../DodLibrary/index';

class ToastPage extends Component {

  _toast1 = null;

  _top = () => {
    Toast.show('hello Inuyasha', {
      position: Toast.positions.TOP,
      duration: Toast.durations.SHORT,
    });
  };

  _center = () => {
    Toast.show('hello Inuyasha', {
      position: Toast.positions.CENTER,
      duration: Toast.durations.SHORT,
    });
  };

  _withImage = () => {
    Toast.show('hello Inuyasha', {
      position: Toast.positions.CENTER,
      duration: Toast.durations.SHORT,
      addon: (
        <Image
          source={{
            uri: 'http://qiniu.enjoymemory.cn//image/background2.png',
          }}
          style={{
            width: 40,
            height: 40,
            borderRadius: 20,
            marginBottom: 10,
          }}
        />
      ),
    });
  };

  _bottom = () => {
    Toast.show('hello Inuyasha', {
      position: Toast.positions.BOTTOM,
      duration: Toast.durations.SHORT,
    });
  };

  _withIcon = () => {
    Toast.show('hello Inuyasha', {
      position: Toast.positions.BOTTOM,
      duration: Toast.durations.SHORT,
      addon: (
        <Icon
          name="snapchat"
          type="material-community"
          size={25}
          color="rgba(255,255,255,.8)"
        />
      ),
    });
  };


  _long = () => {
    Toast.show('hello Inuyasha', {
      position: Toast.positions.CENTER,
      duration: Toast.durations.LONG,
    });
  };


  _always = () => {
    this._toast1 = Toast.show('hello Inuyasha', {
      position: Toast.positions.CENTER,
      duration: Toast.durations.ALWAYS,
    });
  };

  _customize = () => {
    Toast.show('hello Inuyasha', {
      position: Toast.positions.CENTER,
      duration: Toast.durations.LONG,
      wrapperStyle: {
        backgroundColor: 'rgba(0,0,0,.5)',
        borderRadius: 15,
      },
      textStyle: {
        color: '#108eeb',
      },
    });
  };

  _hide = () => {
    this._toast1 && this._toast1.destroy();
  };

  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View style={styles.container}>
        <Navbar
          title="Toast"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView
          contentContainerStyle={{
            alignItems: 'center',
          }}>
          <Divider />
          <HText.H20>
            A very configurable toast
          </HText.H20>
          <Divider />

          <Button.Opacity onPress={this._top}>
            top
          </Button.Opacity>
          <Divider />

          <Button.Opacity onPress={this._center}>
            center
          </Button.Opacity>
          <Divider />


          <Button.Opacity onPress={this._bottom}>
            bottom
          </Button.Opacity>
          <Divider />



          <Button.Opacity onPress={this._withIcon}>
            with icon
          </Button.Opacity>
          <Divider />

          <Button.Opacity onPress={this._withImage}>
            with image
          </Button.Opacity>
          <Divider />

          <HText.H14>
            show 3.5s with Toast.duration.LONG
          </HText.H14>
          <Button.Opacity onPress={this._long}>
            long
          </Button.Opacity>
          <Divider />

          <HText.H14>
            always show with Toast.duration.ALWAYS
          </HText.H14>
          <Button.Opacity onPress={this._always}>
            always
          </Button.Opacity>
          <Divider />

          <HText.H14>
            customize
          </HText.H14>
          <Button.Opacity onPress={this._customize}>
            customize
          </Button.Opacity>
          <Divider />

          <HText.H14>
            hide the Toast
          </HText.H14>
          <Button.Opacity onPress={this._hide}>
            hide
          </Button.Opacity>
          <Divider />

        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});


export default ToastPage;



